<template>
  <div>
     <headers text="黑马商城" style=" position: fixed;
  top: 0;
  left: 0;
  width: 100%;">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back(-1)" />
      </template>
    </headers>
    <comment
      :commentList="goodCommentList"
      @loadMore="loadMore"
      @publishComment="submit"
      style="padding-top:50px"
    >
    </comment>
  </div>
</template>

<script>
import headers from "@/components/headers.vue";
import { getComments } from "@/apis/images";
import comment from "@/components/comment.vue";
import { getsubmitComments } from "../../apis/graphic";
export default {
  components: {
    comment,headers
  },
  data() {
    return {
      goodCommentList: [],
      pageIndex: 1, //页码
    };
  },
  async mounted() {
    this.init();
  },
  //提交评论
  methods: {
    async init() {
      let res = (
        await getComments({
          artid: this.$route.params.artid,
          pageindex: this.pageIndex,
        })
      ).data.message;
      //  console.log(res);
      this.goodCommentList.push(...res);
    },
    async submit(value) {
      if (value.length === 0) {
        this.$toast.fail("输入不能为空");
        return;
      }
      let res = await getsubmitComments(this.$route.params.artid, {
        content: value,
      });
      this.$toast.success(res.data.message);
      this.init();
    },
    loadMore() {
      this.pageIndex++;
      this.init();
    },
  },
};
</script>

<style scoped>
</style>
